<!-- 在线商城 -->
<template>
  <div class="zxsc Pd-T60">
    <div class="container">
      <!--标语-->
      <div class="floor_title_box">
        <i class="floor_title_icon Mg-R10"></i>
        <p class="floor_title Mg-R10">在线商城</p>
        <span class="floor_title_info">优品精选、快速送达</span>
        <div class="menu_list">
          <ul>
            <li
              v-for="(list,index) in ShopMenuList"
              :key="index"
              :class="ActiveIndex == index ? 'active':''"
              @click="slideIndex(index)"
            >
              {{ list.title }}
            </li>
          </ul>
          <p class="Ft-S14 Color_gray6 more Mg-L40">更多</p>
        </div>
      </div>
      <!--商城容器-->
      <div class="zxsc_content">
        <div class="shop_left">
          <div class="shop_banner"><img src="../../common/img/index/pic_zxsc_gg.png" alt=""></div>
          <div class="pharmacies_list">
            <ul>
              <li
                v-for="(list,index) in PharmaciesList"
                :key="index"
                v-if="index<6"
              >
                {{list.title}}
              </li>
              <li class="Color_blue">查看更多</li>
            </ul>
          </div>
        </div>
        <div class="shop_right">
          <ul>
            <li
              v-for="(list,index) in Goods"
              :key="index"
              v-if="index<8"
            >
              <div>
                <div class="goods_img"><img :src="list.pic" alt=""></div>
                <div class="goods_name" v-text="list.name"></div>
                <div class="goods_price Overflow2">
                  <span class="Ft-S14 Color_orange">¥</span>
                  <span class="Ft-S18 Color_orange" v-text="list.money"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Zxsc',
    data() {
      return {
        ActiveIndex: 0,//默认选中第一个
        ShopMenuList: [
          {title: '男科用药'},
          {title: '妇科用药'},
          {title: '养生花茶'},
          {title: '儿科用药'},
          {title: '个人护理'},
        ],//商城导航列表
        PharmaciesList: [
          {title: '北京同仁堂大药房'},
          {title: '北京市海王星辰'},
          {title: '北京三九大药房'},
          {title: '北京老百姓大药房'},
          {title: '北京二天堂大药房'},
        ],//推荐药房列表
        Goods: [
          {
            "id": 115,
            "classid": "75",
            "name": " BARACLUDE/博路定 恩替卡韦片 0.5mg*7片",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15365824163027.jpg",
            "money": 177.5
          },
          {
            "id": 113,
            "classid": "134",
            "name": " 本色 祛白酊 50ml",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15365819268497.jpg",
            "money": 45
          },
          {
            "id": 112,
            "classid": "47",
            "name": " 云南白药 云南白药膏 6.5cm*10cm*15片  商品编码：1600977929收藏 分享自营",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15365792874014.jpg",
            "money": 69
          },
          {
            "id": 110,
            "classid": "77",
            "name": "肌苷片",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15361164959081.jpg",
            "money": 8.5
          },
          {
            "id": 111,
            "classid": "77",
            "name": "益肝灵片",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15361167199628.jpg",
            "money": 6
          },
          {
            "id": 109,
            "classid": "295",
            "name": "天麻首乌片",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15361159668137.jpg",
            "money": 120
          },
          {
            "id": 108,
            "classid": "295",
            "name": "杞菊地黄丸",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/15361147616923.jpg",
            "money": 19.9
          },
          {
            "id": 102,
            "classid": "55",
            "name": "妇科千金片",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/1536111922_6137.jpg",
            "money": 33.8
          },
          {
            "id": 101,
            "classid": "55",
            "name": "洁尔阴洗液",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/1536112485_8400.jpg",
            "money": 18.9
          },
          {
            "id": 78,
            "classid": "187",
            "name": "测试数据（不发货）",
            "pic": "https://www.yunyikang.cn/upload/goods/201809/1536046645_6150.jpg",
            "money": 0.1
          }
        ],//商品列表数据
      }
    },
    methods: {
      slideIndex: function(index){
        this.ActiveIndex = index;
      }
    }
  }
</script>

<style scoped>
  .floor_title_box {
    position: relative;
  }

  .zxsc .floor_title_icon {
    background-image: url("../../common/img/index/floor_icon_zxsc.png");
  }

  /*导航部分*/
  .menu_list {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: -20px;
  }

  .menu_list ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 30px;
  }

  .menu_list li {
    height: 100%;
    width: 90px;
    line-height: 30px;
    text-align: center;
    background-color: #FFF;
    cursor: pointer;
    font-size: 16px;
    color: #333;
  }

  .menu_list li.active,
  .menu_list li:hover {
    background-color: #FF9900;
    color: #fff;
  }

  /*容器部分*/
  .zxsc_content {
    width: 100%;
    height: 500px;
    border: 1px solid #E6E6E6;
    border-top: 2px solid #FF9900;
    margin-top: 20px;
    display: flex;
  }

  .zxsc_content .shop_left {
    width: 280px;
    overflow: hidden;
  }

  .shop_left > .shop_banner {
    width: 100%;
    height: 320px;
  }

  .shop_left > .shop_banner img {
    width: 100%;
    height: 100%;
  }

  .shop_left .pharmacies_list ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .shop_left .pharmacies_list li {
    border: 1px solid #e6e6e6;
    height: 60px;
    width: 50%;
    text-align: center;
    line-height: 60px;
    border-bottom: none;
    cursor: pointer;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
  }

  .shop_left .pharmacies_list li:nth-child(odd) {
    border-left: none;
    border-right: none;
  }

  /*右侧*/
  .zxsc_content .shop_right {
    flex-grow: 1;
  }

  .zxsc_content .shop_right > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    overflow: hidden;
  }

  .zxsc_content .shop_right li {
    width: 25%;
    height: 50%;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
  }

  .zxsc_content .shop_right li:nth-last-child(-n+4) {
    border-bottom: none;
  }

  .zxsc_content .shop_right li > div {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 30px;
  }

  .zxsc_content .shop_right li .goods_img img {
    width: 120px;
    height: 120px;
  }

  .zxsc_content .shop_right li .goods_name {
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 20px 0;
  }


</style>
